<!-- 个人中心——暂时卡片 -->
<template>
	<view>
		<view class="v-padding" v-if="brokerageSetObj">
			<view class="v-title flex-align-center">
				<text></text>
				<view>{{ title }}</view>
			</view>
			<!-- <view class="v-title">{{ title }}</view> -->
			<view class="flex-align-center">
				<block v-for="(i, j) in list" :key="i">
					<view class="v-order flex-column" @click="toGo(i)"
						v-if="!(brokerageSetObj.is_open!=1&&i.text=='推广赚钱')">
						<image :src="i.img"></image>
						<text class="flex" v-if="Number(i.num) > 0">{{ i.num }}</text>
						<view style="color: #333333;">{{ i.text }}</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- ‘客服联系’ -->
		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop flex-column">
					<view class="v-pop-phone flex" @click="call()">
						<image src="/static/my/phone.png"></image>
						{{ kfPhone }}
					</view>
					<view class="v-cancel flex" @click="cancel()">取消</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		name: 'card',
		// props: ['list', 'title'],
		props: {

			list: {

				type: Array,
				default: function() {
					return [];
				}
			},
			title: {
				type: String
			},
			type: Number // 1（普通商品），2（团购）
		},
		created() {
			this.brokerageSetFn()
		},
		onShow() {
			this.brokerageSetFn()
		},
		updated() {
			// this.brokerageSetFn()
		},
		data() {
			return {
				kfPhone: uni.getStorageSync('kfSet').kf_phone,
				kfType: uni.getStorageSync('kfSet').kf_type,
				brokerageSetObj: {},
				uid: uni.getStorageSync('uid'),

			}

		},
		methods: {
			handleLogin() {
				if (this.uid) {
					return true;
				} else {
					uni.navigateTo({
						url: `/pages/login/login`
					});
				}
			},
			async brokerageSetFn() {
				const result = await this.$http.get({
					url: this.$api.brokerageSet,
					data: {


					}
				});
				if (result.errno == 0) {



					this.brokerageSetObj = result.data
					uni.setStorageSync('brokerageSet', result.data);
				}
			},
			// 拨打电话
			call() {
				this.$sun.phone(this.kfPhone);
			},
			// "客服联系" 取消按钮
			cancel() {
				this.$refs.pop.close();
			},
			// 我的订单
			toGo(item) {
				console.log('itme.id', item);


				// 普通商品
				if (this.type == 1 && this.handleLogin()) {
					this.$sun.navGo('/pages/orderMessage/goodsOrderList/goodsOrderList', {

						tabOrder: item.id
					});
				} else if (this.type == 2 && this.handleLogin()) {
					this.$sun.navGo('/pages/orderMessage/orderList/orderList', {
						tabSwitchOrder: 0,
						tabOrder: item.id
					});
					// this.$sun.navGo('/pages/orderMessage/orderList/orderList');
				} else {
					if (item.text == '客服联系') {
						// console.log('emit')
						if(this.kfType==1){
							this.$refs.pop.show({
								anim: 'bottom',
								position: 'bottom',
								shadeClose: true, //false使用户不能点击其它关闭页面
								topclose: false,
								shade: false,
							});
						}else{
							this.$sun.kf()
						}
					}else if(item.text == '推广赚钱') {
						if (this.handleLogin()) {
							this.$sun.navSwitch(item.url);
						}

					} else {
						if (this.handleLogin()) {
							this.$sun.navGo(item.url);
						}

					}
				}
			}
		}
	};
</script>

<style lang="less">
	// 客服联系
	.v-pop {
		width: 750rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;

		.v-pop-phone {
			width: 100%;
			border-bottom: 2rpx solid #f7f7f7;
			color: #08ba06;
			font-size: 32rpx;
			padding: 36rpx 0 32rpx;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 12rpx;
			}
		}

		.v-cancel {
			width: 100%;
			padding: 36rpx 0;
			color: #8f8f8f;
			font-size: 32rpx;
		}
	}

	.v-padding {
		padding: 40rpx 0 44rpx;
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 8rpx 2rpx 8rpx #65b0f90f;

		.v-title {
			padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #3DAEF7;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.v-order {
			position: relative;
			width: calc(100% / 4);

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				position: absolute;
				top: -12rpx;
				left: 102rpx;
				padding: 0 12rpx;
				line-height: 34rpx;
				display: inline-block;
				// min-width: 34rpx;
				height: 34rpx;
				font-size: 20rpx;
				color: #fff;
				background-color: orangered;
				border-radius: 50%;
			}

			view {
				margin-top: 28rpx;
				color: #333;
			}
		}
	}
</style>